<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

	<title>boost 搜索引擎</title>
	<style>
		/* 确保html和body占满整个视口高度 */
        html, body {
            height: 100%;
            min-height: 100vh;
            margin: 0;
            padding: 0;
        }
		
		/* 页面基础样式 */
        body {
            font-family: "Segoe UI", Segoe, Tahoma, Arial, Verdana, sans-serif;
            color: #71777d;
            /* 修改为使用road.jpg作为背景图片 */
            background-image: url('road.jpg');
            /* 确保图片覆盖整个背景 */
            background-size: cover;
            /* 图片居中显示 */
            background-position: center;
            /* 防止图片重复 */
            background-repeat: no-repeat;
            /* 固定背景图片，防止滚动时出现空白 */
            background-attachment: fixed;
        }

        /* 主容器 */
        .container {
            /* 设置div的宽度 */
            width: 800px;
            /* 通过设置外边距达到居中对齐的目的 */
            margin: 0px auto;
            /* 设置外边距的上边距，保持元素和网页的上部距离 */
            margin-top: 200px;
        }

        /* 搜索框区域 */
        .container .search {
            /* 宽度与父标签保持一致 */
            width: 100%;
            /* 高度设置为52px */
            height: 52px;
            display: flex;
            align-items: center;
        }

        /* 搜索输入框 */
        .container .search input {
            width: 600px;
            height: 50px;
            /* 设置边框属性：边框的宽度，样式，颜色 */
            border: 1px solid black;
            /* 去掉input输入框的有边框 */
            border-right: none;
            /* 设置内边距，默认文字不要和左侧边框紧挨着 */
            padding-left: 10px;
            /* 设置input内部的字体的颜色和样式 */
            color: #333;
            font-size: 14px;
            /* 设置圆角 */
            border-radius: 25px 0 0 25px;
            outline: none;
        }

        /* 搜索按钮 */
        .container .search button {
            width: 150px;
            height: 54px;
            /* 设置button的背景颜色为白色 */
            background-color: #FFFFFF;
            /* 设置button中的字体颜色 */
            color: #888888;
            /* 设置字体的大小，增大放大镜图标 */
            font-size: 28px;
            font-family:Georgia, 'Times New Roman', Times, serif;
            /* 设置圆角 */
            border-radius: 0 25px 25px 0;
            /* 设置边框为与输入框相同的黑色 */
            border: 1px solid black;
            border-left: none;
            cursor: pointer;
        }

        /* 搜索提示模块 */
        .container .search-tip {
            text-align: center;
            margin-top: 110px;
        }

        .container .search-tip h2 {
            font-size: 50px;
            color: #FFFFFF;
            margin: 0;
            font-weight: normal;
        }
	</style>
</head>
<body> 
	<div class = "container">
		<div class = "search"> 
			<input type="text" id="homeSearchInput">
            <button onclick="Search()" id="searchButton">🔍</button>
		</div>
        
        <!-- 新增的搜索提示模块 -->
        <div class="search-tip">
            <h2>搜索一下，你就知道</h2>
        </div>
	</div>
    <script>
        function Search() {
            // 获取搜索框中的内容
            let query = $("#homeSearchInput").val();
            
            // 验证输入不为空
            if (!query || query.trim() === "") {
                alert("请输入搜索关键字");
                return;
            }
            
            // 跳转到index页面，并将搜索关键字作为URL参数传递
            window.location.href = "index.html?word=" + encodeURIComponent(query);
        }
        
        // 添加回车搜索功能
        $("#homeSearchInput").keypress(function(e) {
            if (e.which === 13) { // 回车键的键码是13
                Search();
            }
        });
        
        // 为搜索按钮添加点击事件（已在HTML中通过onclick属性绑定）
        $("#searchButton").on("click", Search);
    </script>
</body>
</html>
